import React,{useRef,useEffect} from 'react';
import style from "../../styles/Mine/mine.module.scss"
import { Link } from 'react-router-dom'
import { Modal} from 'antd-mobile';
import 'antd-mobile/dist/antd-mobile.css';
import { connect } from "react-redux";

const Mine = (props) => {
  console.log(props)
  const callClick = useRef()
  const alert = Modal.alert;
  const showAlert = () => {
    const alertInstance = alert(' ', '+123456', [
      { text: '呼叫', onPress: () => console.log('cancel'), style: 'default' },
      { text: '取消', onPress: () => console.log('ok') },
    ]);
    setTimeout(() => {
      // 可以调用close方法以在外部close
      console.log('auto close');
      alertInstance.close();
    }, 500000);
  };
  useEffect(() => callClick.current.addEventListener("click",showAlert,{passive:false}) )
  return (
    <div>
      <div className={style.top}>
        <p className={style.title}>我的</p>
        <div className={style.userPhoto}>
          <div className={style.photo} ></div>
          <div className={style.userName}>{/* {props.state.Login.userInfo.username} */}</div>
        </div>
      </div>
      <div className={style.middle}>
        <div className={style.middleItem}>
          <div className={style.itemNumber}>2</div>
          <div className={style.itemName}>我的出租</div>
        </div>
        <div className={style.middleItem}>
          <div className={style.itemNumber}>2</div>
          <div className={style.itemName}>我的求租</div>
        </div>
        <div className={style.middleItem}>
          <div className={style.itemNumber}>2</div>
          <div className={style.itemName}>我的预约</div>
        </div>
      </div>
      <div className={style.bottom}> 
        <ul className={style.bottomList}>
          <li className={style.bottomItem} ref={callClick}>
            <div className={`${style.bgBox} ${style.call}`}></div>
            <div className={style.textBox}>联系客服
                 <div className={style.arrows}></div>
              <div className={style.phoneNumber}>123456</div>
            </div>
          </li>
          <Link to="/about">
            <li className={style.bottomItem}>
              <div className={`${style.bgBox} ${style.aboutUs}`}></div>
              <div className={style.textBox}>关于我们<div className={style.arrows}></div></div>
            </li>
          </Link>
          <Link to="/set">
            <li className={style.bottomItem}>
              <div className={`${style.bgBox} ${style.set}`}></div>
              <div className={style.textBox}>设置<div className={style.arrows}></div></div>
            </li>
          </Link>
          <Link to="/question">
            <li className={style.bottomItem}>
              <div className={`${style.bgBox} ${style.question}`}></div>
              <div className={style.textBox}>问题反馈<div className={style.arrows}></div></div>
            </li>
          </Link>
        </ul>
      </div>
    </div>
  );
}


export default connect((state) => ({state}))(Mine);
